<%@page import="cn.edu.ujn.finallab.dao.Customer"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<meta charset="UTF-8">
<title>客房管理</title>
<link href="<c:url value="/css/adminBackground.css"/>" rel="stylesheet"
	type="text/css" />
<link href="<c:url value="/css/roomManager.css"/>" rel="stylesheet"
	type="text/css" />
<link rel="stylesheet" type="text/javascript" href="<c:url value="/js/jQuery.js"/>"/>
<link rel="stylesheet" type="text/javascript" href="<c:url value="/js/jquery.min.js"/>"/>
<script type="text/javascript">
	function showHide()
	{
		var allroom1 = document.getElementById("allroom1");
		var allroom2 = document.getElementById("allroom2");
		if (allroom1.style.display == 'block' && allroom2.style.display == 'none') {
			allroom1.style.display = 'none';
			allroom2.style.display = 'block';
		} else if (allroom1.style.display == 'none' && allroom2.style.display == 'block') {
			allroom1.style.display = 'block';
			allroom2.style.display = 'none';
		}
	}
</script>
</head>
<body>
	<!-- 密送变量 -->
	<input type="hidden" id="roomtype1" value="${requestScope.roomtype}">
	<input type="hidden" id="roomnumber1" value="${requestScope.roomnumber}">
	<div class="whole">
		<div class="front"></div>
		<div class="footer"></div>
		<div class="title">
		酒&nbsp;店&nbsp;客&nbsp;房&nbsp;管&nbsp;理
		<span class="return"><a href="/finallab/return" onclick="return confirm('返回主页？')" style="color: red;">返回主页</a></span>
		<input type="button" name="" id="" value="点我切换"  onclick="showHide()"/>
		</div>
		<!-- 下面分页显示所有客房的状态，每页显示20个，按照4*5样式，不同状态的客房不同的颜色 -->
		<div class="find" style="display: inline-block; text-align: center; margin-left: 20%">
			<div style="display: inline-block">
			<form action="<c:url value="/selectRoomByType"/>" method="post">
			<span style="font-size: 16px">根据房间类型查询：</span> 
			<select class="span2" style="display: inline; height: 20px; width: 120px" name="roomtype">
				<option value="全部">- 全部 -</option>
				<option value="单人间">- 单人间 -</option>
				<option value="双人间">- 双人间 -</option>
				<option value="三人间">- 三人间 -</option>
				<option value="四人间">- 四人间 -</option>
			</select>
			<input type="submit" value="查询">
			</form>
			</div>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<div style="display: inline-block">
			<form action="<c:url value="/selectRoomByNumber"/>" method="post">
			<span style="font-size: 16px">根据房间号查询：</span> 
			<input type="text" style="height: 20px; width: 120px" name="roomnumber" placeholder="请输入房间号进行查询">
			<input type="submit" value="查询">
			</form>
			</div>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<div class="toadd" style="margin-left: 50px; display: inline-block">
				<a href="/finallab/addRoom?currentPage=${requestScope.pagemsg.page}&lastPage=${requestScope.pagemsg.totalpage}"><input type="button" name="" id="" value="去添加客房" /></a>
			</div>
		</div>
		<div class="allroom1" id="allroom1" style="display: block;">
		<c:if test="${requestScope.pagemsg.rows == null}">
			<div class="msg" style="color: red; width: 100%; text-align: center; font-size: 16px; margin-left: -90px; margin-top: 10px">		
				查询结果为空！	
			</div>
		</c:if>
		<c:if test="${requestScope.pagemsg.rows != null}">	
		<table class="table table-bordered table-striped" border="1">
			<thead>
				<tr>
					<th>房间号</th>
					<th>客房类型</th>
					<th>客房价格</th>
					<th>客房描述</th>
					<th>修改信息</th>
					<th>删除客房</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${requestScope.pagemsg.rows}" var="row">
					<tr>
						<td>${row.number}</td>
						<td>${row.type}</td>
						<td>￥${row.price}</td>
						<td id="decription" style="width: 200px;white-space: nowrap;text-overflow: ellipsis;verflow: hidden;">${row.decription}</td>
						<td class="modify"><a href="/finallab/modifyRoom?currentPage=${requestScope.pagemsg.page}&number=${row.number}">修改</a></td>
						<td class="delete"><a href="/finallab/deleteRoom?currentPage=${requestScope.pagemsg.page}&number=${row.number}" onclick="return confirm('确定删除？')" >删除</a></td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
		</div>
		<!-- 显示酒店客房状态图 -->
		<div class="allroom2" id="allroom2" style="display: none;">
			<c:forEach items="${requestScope.pagemsg.rows}" var="row">
				<c:if test="${row.state eq '已预定' }">
					<div style="display: inline-block">
                		<div id="div1" style="width:150px;height: 150px;background-color: yellow;display: inline-block;margin-top: 20px; font-size: 14px">
                    		房间号：${row.number} <br>
                    		房型：${row.type}
                    		<h3>${row.state}</h3>
                		</div>
            		</div>
				</c:if>
				<c:if test="${row.state eq'已入住' }">
					<div style="display: inline-block">
                		<div id="div1" style="width:150px;height: 150px;background-color: red;display: inline-block;margin-top: 20px; font-size: 14px">
                    		房间号：${row.number} <br>
                    		房型：${row.type}
                    		<h3>${row.state}</h3>
                		</div>
            		</div>
				</c:if>
				<c:if test="${row.state eq '未预定' }">
					<div style="display: inline-block">
                		<div id="div1" style="width:150px;height: 150px;background-color: greenyellow;display: inline-block;margin-top: 20px; font-size: 14px">
                    		房间号：${row.number} <br>
                    		房型：${row.type}
                    		<h3>${row.state}</h3>
                		</div>
           			</div>
				</c:if>
			</c:forEach>
		</div>
		<div class="page" style="margin-top: 50px">
		<div class="tip" style="color: red">${msg}</div>
		<span>第${requestScope.pagemsg.page}页，共${requestScope.pagemsg.totalpage}页，总客房数：${requestScope.pagemsg.total}</span>
		<span> <c:if test="${requestScope.pagemsg.page != 1}">
					<a href="${pageContext.request.contextPath }/allRoom?currentPage=1">[首页]</a>
					<a href="${pageContext.request.contextPath }/allRoom?currentPage=${requestScope.pagemsg.page-1}">[上一页]</a>
				</c:if> 
				<c:if test="${requestScope.pagemsg.page != requestScope.pagemsg.totalpage}">
					<a href="${pageContext.request.contextPath }/allRoom?currentPage=${requestScope.pagemsg.page+1}">[下一页]</a>
					<a href="${pageContext.request.contextPath }/allRoom?currentPage=${requestScope.pagemsg.totalpage}">[尾页]</a>
				</c:if>
		</span>
		</div>
		</c:if>
	</div>
</body>
<script th:inline="javascript">	
		var roomtype1 = $("#roomtype1").val();
		var roomnumber1 = $("#roomnumber1").val();
		console.log(roomtype1);
		console.log(roomnumber1);
		$(function(){
			if(roomtype1 != ""){
				$("#roomtype").val(roomtype1);
			}		
		})
		$(function(){
			if(roomnumber1 != ""){
				$("#roomnumber").val(roomnumber1);
			}
		})
</script>
</html>